<script>
import { defineComponent, getCurrentInstance, ref } from 'vue'
import { useCounterStore } from '../stores'
import { ElMessageBox,ElMessage } from 'element-plus'

export default defineComponent({
    setup() {
        const store=useCounterStore()
        const userArray=ref([])
        const roleArray=ref([])
        const personalArray=ref([])
        const dialogVisible=ref(false)
        const dialogVisible2=ref(false)
        const projectType=ref('')
        const roleFlag=ref(store.flag)
        const {proxy}=getCurrentInstance()
        const taskOptions=ref([
            {
                value: '1',
                label: '管理员',
            },
            {
                value: '2',
                label: '项目经理',
            },
            {
                value: '3',
                label: '组长',
            },
            {
                value: '6',
                label: '员工',
            }
        ])
        const userDetail=()=>{
            proxy.$http.get('/system/user/list')
            .then((res)=>{
                userArray.value=[res.rows,...userArray.value]
                console.log(userArray.value)
                
            })
            proxy.$http.get('/system/role/list')
            .then((res)=>{
                roleArray.value=res.data
            })
            
        }
        const showAdmin=(data)=>{
            dialogVisible.value=true
            personalArray.value=data
            console.log(personalArray.value)
        }
        //  修改用户信息
        const editUser=()=>{
            let roleId=0
            console.log(projectType.value)
            if(projectType.value==="1"){
                roleId=1
            }else if(projectType.value==="2"){
                roleId=2
            }else if(projectType.value==="3"){
                roleId=3
            }else{
                roleId=6
            }
            proxy.$http.get(`/system/user/get/${personalArray.value.userName}`)
                .then((res)=>{
                    proxy.$http.put('/system/user',{
                        'userId':res.data[0].userId,
                        'nickName':personalArray.value.nickName,
                        'email':personalArray.value.userName.email,
                        'sex':personalArray.value.userName.sex,
                        'roleIds':[roleId],
                    }).then((res)=>{
                        ElMessage({
                            showClose: true,
                            message: '信息修改成功啦 ^.^',
                            type: 'success',
                        })
                        dialogVisible.value=false
                    }).catch((err)=>{
                        ElMessage({
                            showClose: true,
                            message: '信息修改失败,请联系客服 X.x',
                            type: 'error',
                        })
                    })
                })
        }
        // 重置密码
        const resetPassword=(data)=>{
            
            
            proxy.$http.get(`/system/user/get/${data}`)
                .then((res)=>{
                    proxy.$http.put('/system/user',{
                        'userId':res.data[0].userId,
                        'userName':data,
                        'password':'123456',
                        
                    }).then((res)=>{
                        ElMessage({
                            showClose: true,
                            message: '密码重置成功,可以登录啦 ^.^',
                            type: 'success',
                        })
                        dialogVisible.value=false
                    }).catch((err)=>{
                        ElMessage({
                            showClose: true,
                            message: '密码重置失败,请联系客服 X.x',
                            type: 'error',
                        })
                    })
                })
        }

        userDetail()
        return{
            userArray,
            dialogVisible,
            dialogVisible2,
            personalArray,
            showAdmin,
            resetPassword,
            editUser,
            taskOptions,
            projectType,
            roleArray,
            roleFlag,
        }
    },
})

</script>

<template>
    <div>
        <div v-for="(item,index) in userArray" :key="index" class="grid">
            <el-card class="box-card" v-for="(item2,i) in item" :key="i">
                <div class="clearfix">
                    <header>
                        <slot name="header">
                            <span class="title">{{item2.nickName}}</span>
                        </slot>
                    </header>
                </div>
                <div class="text item">
                <div class="grid2">
                <div>姓名:  <el-tag>{{item2.userName}}</el-tag></div>
                <div>性别:  <el-tag>{{item2.sex}}</el-tag></div>
                <div>邮箱:  <el-tag>{{item2.email}}</el-tag></div>
                <div style="margin-top: 15px" v-if="roleFlag">
                <el-button type="primary" size="mini" @click="showAdmin(item2)">修改用户信息</el-button>
                <el-button type="danger"  size="mini" @click="resetPassword(item2.userName)">重置密码</el-button>
                </div>
                </div>
                </div>
            </el-card>
        </div>
        <el-dialog
            title="编辑用户信息"
            width="40%" v-model="dialogVisible">
            <el-form :model="passForm" status-icon :rules="rules" ref="passForm" label-width="100px" class="grid2">
                <el-form-item label="用户昵称：">
                <el-input v-model="personalArray.nickName"></el-input>
                </el-form-item>
                <el-form-item label="用户性别：">
                <el-input v-model="personalArray.sex"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱：">
                <el-input v-model="personalArray.email"></el-input>
                </el-form-item>
                <el-form-item label="用户职位：" prop="checkPass" >
                    <el-select v-model="projectType" placeholder="选择职位">
                        <el-option
                        v-for="item in taskOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogVisible=false">取 消</el-button>
                    <el-button type="primary" @click="editUser()">确 定</el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>
  </div>
</template>

<style scoped>

.box-card{
  width: auto;
}
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    width: 100%;
}
.title{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 20px;
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 3px;
}
</style>
